<template>
  <div>
    <!-- 使用child1组件 -->
    <!-- <Child1>2220班级真卷</Child1> -->

    <!-- 使用child2组件 -->
    <!-- <Child2>
        <template #header>
            <p>我是头部</p>
        </template>
    
            <p>我是中间部分</p>
    
        <template #footer>
            <p>我是尾部</p>
        </template>
    </Child2> -->

    <!-- 使用child3组件 -->
    <!-- <Child3> -->
        <!-- <p>{{ msg }}</p> -->
        <!-- 使用子组件中的数据 -->
        <!-- <template v-slot="slotProps">
        <p>
            <span>{{ slotProps.child3msg }}</span>
        </p> -->
    <!-- </template> -->
    <!-- </Child3> -->

    <!-- 使用child4组件 -->
    <Child4>
        <template #header="header1">
            <p>header:{{  header1.name1}}</p>
        </template>
        <template #default="header2">
            <p>default:{{header2.name2  }}</p>
        </template>
        <template #footer="header3">
            <p>footer:{{header3.name3  }}</p>
        </template>

    </Child4>
  </div>
</template>

<script>
// import Child1 from './Child1.vue';
// 具名插槽:
// 给slot 插槽定义name 属性, 然后该属性和当前组件标签中的内容的template 上的v-slot 或 #
// 对应的名字一一对应,实现对应的匹配
// 当其他的插槽都一一对应, 那么最后部分没有匹配的内容部分会自动匹配到默认插槽位置

// import Child2 from './Child2.vue';
// import Child3 from './Child3.vue';

  import Child4 from './Child4.vue';
  export default {
    name:'',
    data () {
      return {
        msg:'节日快乐'
      };
    },
    components: {
        // Child1
        // Child2,
        // Child3,
        Child4
    }


  }

</script>
<style scoped>

</style>